{% extends "login.html" %}
{% block title %}{{ CourseDetail.course_title }}{% endblock %}
{% block navigation %}>>{{ CourseDetail.course_title }}{% endblock %}
{% block menu %}
	<ul class="menu">           
      <li class="active"><a href="/course/">Home</a></li>
      <li><a href="/create/">Create Course</a></li>
      <li><a href="/search/">Search Course</a></li>          
	</ul>
{% endblock %}
{% block content %}
	<div id="description">
		<div id="details_title"><h3>{{ CourseDetail.course_title }}</h3></div>
						<div class="date">
					<div class="ratevalue">
					{{ CourseDetail.course_average }}					
					</div>
				</div>
		<div class="date">
		<div class="day"><div class = "ratestar">{{ CourseDetail.course_average }}</div></div>
		</div>
		<div class="cleaner">&nbsp;</div>
		<p><span class = "details_category">Course Code:</span><span>{{ CourseDetail.course_code }}</span></p>
		<p><span class = "details_category">University:</span><span>{{ CourseDetail.school.university }}</span></p>	
		<p><span class = "details_category">School:</span><span>{{ CourseDetail.school }}</span></p>
		<p><span class = "details_category">Subject:</span><span>{{ CourseDetail.course_subject }}</span></p>		
		<p><span class = "details_category">Introduction</span></p>	
		<p>{{ CourseDetail.course_desc }} </p>					
	</div>
	
	<div class = "comment-box"> 
		{% if CommentList %}
		    {% for Comment in CommentList %}
				<div class="comment-inside-box">
				<div id="details_title"><h2>{{ Comment.comment_title }}</h2></div>
				
				<div class="date">
				<p class="day"><div class = "ratestar">{{ Comment.comment_rating }}</div></p>
				</div>
							  
				<div class="cleaner">&nbsp;</div>
				<div class="year-semester"><span class="comment-year" >Year:</span>{{ Comment.comment_year }}</div>
				<div class="year-semester"><span class="comment-year" >Semester:</span>{{ Comment.comment_semester }}</div>
				<div class="year-semester"><span class="comment-year" >Tutor:</span>{{ Comment.comment_tutor }}</div>
				<div class="tutor">{{ Comment.comment_date }}</div>
				<div class="cleaner">&nbsp;</div>
				<p> {{ Comment.comment_text }}</p>			
				</div>
			
			    {% endfor %}
		       
		{% else %}
		{% endif %}
	</div>

	{% if user.is_authenticated %}
		<div class = "course">
		 	<form id = "commentform" action="." method="post">{% csrf_token %}
		 	<div class="hidden">
		 	<p><label for="id_course">Title</label>
				{{ form.course }}
				{{ form.course.errors }}
		 	</div>
		 	
		 	<ul>
        <li>    
                        <label for="id_comment_title">Title</label> 
                        <input class="required" type="text" name="comment_title" value="" id="id_comment_title" />
                        <p1> {{ form.comment_title.errors }}</p1></li>
                        
        <li>    <label for="id_comment_year">Year</label> 
                        <select class="required" name="comment_year" id="id_comment_year">
                                        <option value="" selected="selected">---------</option>
                                        <option value="2008">2008</option>
                                        <option value="2009">2009</option>
                                        <option value="2010">2010</option>
                                        <option value="2011">2011</option>
                                        <option value="2012">2012</option>
                        </select>
                        <p1> {{ form.comment_year.errors }}</p1></li>
        <li>
                        <label for="id_comment_semester">Semester</label> 
                        <select class="required" name="comment_semester" id="id_comment_semester">
                                        <option value="" selected="selected">---------</option>
                                        <option value="1">Semester 1</option>
                                        <option value="2">Semester 2</option>
                                        <option value="3">Semester 3</option>
                        </select>
                        <p1>{{ form.comment_semester.errors }}</p1></li>
        <li>
                        <label for="id_comment_tutor">Tutor</label> 
                        <input class="required" type="text" name="comment_tutor" value="" id="id_comment_tutor" />
                        <p1>{{ form.comment_tutor.errors }}</p1></li>

				
			<li>
				<label for="id_comment_rating">Rating</label>
				<label for="id_comment_rating_0"><input type="radio" id="id_comment_rating_0" value="1" name="comment_rating" class="star"/></label>
				<label for="id_comment_rating_1"><input type="radio" id="id_comment_rating_1" value="2" name="comment_rating" class="star"/></label>
				<label for="id_comment_rating_2"><input type="radio" id="id_comment_rating_2" value="3" name="comment_rating" class="star"/></label>
				<label for="id_comment_rating_3"><input type="radio" id="id_comment_rating_3" value="4" name="comment_rating" class="star"/></label>
				<label for="id_comment_rating_4"><input type="radio" id="id_comment_rating_4" value="5" name="comment_rating" class="star"/></label>
				{{ form.comment_rating.errors }}</li>
				
			<li>
                        <label for="id_comment_text">Comment</label><br> 
                        <textarea rows="5" cols="35" class="required" name="comment_text" id="id_comment_text">
               </textarea>
              <p1>{{ form.comment_text.errors }}</p1></li>

			</ul>
			<input class="button" type="submit" value="Submit">
			</form>
		</div>
		{% if form.errors %}
			<p class="error">Invalid Input</p>
		{% endif %}
	{% endif %}

	<script type="text/javascript">
	$(document).ready(function() { 
		
		$(function() { 
			$('div.ratestar').ratecourse();
		});
				
		 var form = jQuery('#commentform');
	      var options = {        		                      
	    		             url: '/course/' + {{ CourseDetail.pk }} + '/',  // override for form's 'action' attribute         
	    		             type:  'post',
	    		             data: form.serialize(),
	    		             dataType:  'json' ,
	    		             clearForm: true,
	    		             success: showResponse  
	    		         }; 
	      $('#commentform').submit(function(e) { 
	    	  
	    	          e.preventDefault();
	    	           $(this).ajaxSubmit(options);
	    	          return false;     
	    }); 
	     
	      function showResponse(responseText){           	
	     	 var obj = responseText;
	     	 var width = (obj.comment_rating/5) * 55
	      	 var html = $( 
	      			'<div class="comment-inside-box"><div id="details_title"><h2>'
	      			+ obj.comment_title + '</h2></div><div class="date"><p class="day"><div class = "ratestar">'
	      			+  '<div class="rating_bar"><div style="width:' + width + 'px"></div></div>'
	      			+ '</div></p></div><div class="cleaner">&nbsp;</div><div class="year-semester"><span class="comment-year" >Year:</span>'
	      			+ obj.comment_year + '</div><div class="year-semester"><span class="comment-year" >Semester:</span>'
	      			+ obj.comment_semester + '</div><div class="year-semester"><span class="comment-year" >Tutor:</span>'
	      			+ obj.comment_tutor + '</div><div class="tutor">'
	      			+ obj.comment_date + '</div><div class="cleaner">&nbsp;</div><p>'
	      			+ obj.comment_text + '</p></div>'
	      	     	 );
	      	      	 
	     	 jQuery('.comment-box').append(html);    	
	     	 
	      }     
	      	
	  	$('#commentform').validate();
	      
	});
	
	$.fn.ratecourse = function (){
		return $(this).each(function() { 
	        // Get the value 
	        var rate = parseFloat($(this).html()); 
	        // Make sure that the value is in 0 - 5 range, multiply to get width 
	        var width = (rate/5) * 55; 
	        $(this).html('<div class="rating_bar"><div style="width:' + width + 'px"></div></div>');
	      
	    }); 
		
	}
	</script >
{% endblock %}
